<template>
  <el-container class="main-box">
    <el-main ref="Box">
        <el-scrollbar class="person_body">
      <div class="my-duty">
        <div class="box-card">
          <div class="card-head">
            <module-header :name="user_name" content="我的职责" />
            <header-features
               v-if="my_duty_list.length"
               not_clickable
              :type_num="0"
              :id="dutyId"
              :text="STATUS[my_state]"
              :is_text="true"
              :change_font="true"
              :personal_eit="my_state === '0' || my_state === '2'"
              @handleReview="handleReview"
              @handleDepartment="handleDepartment"
              @handleChangeFontSize="handleChangeFontSize"
            />
          </div>
          <eit-content
            :personal_eit="my_state === '0' || my_state === '2'"
            router_type="duty"
            :text="my_duty_list"
            :is_add_content="my_state === '0' || my_state === '2'"
            :font_size="font_change.font_size"
            :font_family="font_change.font_family"
            :type_content="font_change.type_content"
            :type_on_line="0"
            @handleAddDuty="handleAddDuty"
            @handleDeleteDuty="handleDeleteDuty"
            @handleEitContent="handleEitContent"
            @AddCurrentYearDuty="addCurrentYearDuty"
          />
        </div>
      </div>
      <div class="my-duty m-b-14" v-if="department_state !== '0' ">
        <div class="box-card">
          <div class="card-head">
            <module-header content="我所在部门职责" :time="department_dutyYear" />
            <header-features
              v-show="department_duty_list.length"
              :type_num="1"
              :id="department_id"
              :year="department_dutyYear"
              :text="STATUS[department_state]"
              :is_text="true"
              @handleReview="handleReview"
              @handleDepartment="handleDepartment"
            />
          </div>
          <eit-content
            :text="department_duty_list"
            router_type="duty"
            :font_size="font_change.font_size"
            :font_family="font_change.font_family"
            :type_content="font_change.type_content"
            :type_on_line="1"
          />
        </div>
      </div>
      </el-scrollbar>
    </el-main>
    <el-aside width="300px">
      <mail-list
        class="mail-list"
        :duty_list="duty_list"
        :float_list="float_list"
        :duty_index="0"
        router_type="duty"
        @handleManDuty="handleManDuty"
      />

      <!--      <SideList  />-->
    </el-aside>
    <vxe-modal v-model="centerDialogVisible" class="modalBox" :title="personage_name + '的职责'" width="60%" height="60%" show-zoom resize>
      <template v-slot>
        <div class="personage">
          <div v-for="(item, index) in personageList" :key="item.id" class="personage_box">
            <p class="text-number">{{ index + 1 }}</p>
            <p class="personage-text" v-html="item.content" />
          </div>
          <div v-if="!personageList.length" class="personage-text" style="line-height: 68px;">暂无内容</div>
        </div>
      </template>
    </vxe-modal>
    <el-backtop target=".el-main" :visibility-height="hide_position" />
  </el-container>
</template>

<script>
import { syncRequest } from '@/utils/httpRequet'
import ModuleHeader from '@/appraise/components/ModuleHeader'
import HeaderFeatures from '@/appraise/components/HeaderFeatures'
import EitContent from '@/appraise/components/EitContent'
import MailList from '@/appraise/components/MailList'

import SideList from '@/appraise/components/SideList'
export default {
    name: 'DutyIndex',
    components: {
        ModuleHeader,
        HeaderFeatures,
        EitContent,
        MailList,
        SideList
    },
    data() {
        return {
          hide_position: 30,
            STATUS: Object.freeze({
                0: '提交审核',
                1: '待审核',
                2: '已拒绝',
                3: '已通过'
            }),
            centerDialogVisible: false,
            personageList: [],
            personage_name: '',
            man_refuse_content: '',
            part_refuse_content: '',
            font_change: {
                    font_size: 1,
                    font_family: 1,
                    type_content: -1
                }, //字体选择
            user_name: '', //登录人
            my_duty_list: [], //我的职责列表
            dutyId: '', //个人职责唯一标识
            my_state: '0', //我的审核状态
            department_duty_list: [], //部门职责列表
            department_id:'',
            department_state: '0', //部门审核状态
            department_dutyYear: '', //部门职责年份
            duty_list: [
                { url: 'appraisegrzz', title: '个人职责' },
                { url: 'appraisebmzz', title: '部门职责' }
            ],
            float_list: [
                { f_name: '我部门成员', is_select: false, is_unfold: true, child: [] },
                { f_name: '我关注的部门', is_select: false, is_unfold: true, child: [] },
                { f_name: '我关注的人员', is_select: false, is_unfold: true, child: [] }
            ],
        }
    },
    mounted() {
        this.init()
        this.initDeptGetAll()
    },
    methods: {
        init() {
            //获取个人今年职责
            const my_duty = syncRequest({
                url: 'userGet',
                data: {
                    userId: '',
                    year: ''
                }
            })
            const errorCode = my_duty.errorCode === '1'
            this.dutyId = errorCode ? my_duty.data.dutyId : ''
            this.my_duty_list = errorCode ? my_duty.data.contentList : []
            if (errorCode) {
                this.my_duty_list.forEach(res => {
                    this.$set(res, 'is_eit', false)
                })
                this.my_state = my_duty.data.state
                this.man_refuse_content = this.my_state == 2 ? my_duty.data.refuseReason : ''
                this.user_name = my_duty.data.userName
            }
        },
        initDeptGetAll() {
            //获取部门今年职责
            const department_duty = syncRequest({
                url: 'deptGet',
                data: {
                    deptId: '',
                    year: ''
                }
            })
            const errorCode = department_duty.errorCode === '1'
            this.department_duty_list = errorCode ? department_duty.data.contentList : []
            if (errorCode) {
                this.department_duty_list.forEach(res => {
                    this.$set(res, 'is_eit', false)
                })
                this.department_state = department_duty.data.state
                this.part_refuse_content = this.department_state == '2' ? department_duty.data.refuseReason : ''
                this.department_dutyYear = department_duty.data.dutyYear
                this.department_id = department_duty.data.deptId
            }
        },
        /**
         * @name 字更改
         */
        handleChangeFontSize(e) {
            if (e.index1 == 0) {
                this.font_change.font_family = e.index2
            }
            if (e.index1 == 1) {
                this.font_change.font_size = e.index2
            }
            this.font_change.type_content = e.type
        },
        /**
         * @name 新增个人当前年份职责
         */
        addCurrentYearDuty() {
            const current_year_duty = syncRequest({
                url: 'userAddCurrentYearDuty',
                data: {
                    userId: ''
                }
            })
            if (current_year_duty.errorCode === '1') {
                this.dutyId = current_year_duty.dutyId
            }
        },
        /**
         * @name 提交审核
         */
        handleReview() {
          const submit_audit = syncRequest({
              url: 'userSubmitAudit',
              data: {
                  dutyId: this.dutyId
              }
          })
          const errorCode = submit_audit.errorCode === '1'
          if (errorCode) {
              this.my_state = '1'
              this.man_refuse_content = ''
          }
          this.$message({
              message: errorCode ? '提交成功' : '提交失败',
              type: errorCode ? 'success' : 'error',
              duration: 2000,
              center: true
          })
        },
        /**
         * @name 编辑职责内容
         */
        handleEitContent(e) {
            const eit_duty_content = syncRequest({
                url: 'userEditDutyContent',
                method: 'POST',
                data: {
                    dutySubId: e.item.dutySubId,
                    content: e.item.content
                }
            })
          if(eit_duty_content.errorCode === '1') {
            this.$message.success({ message: '编辑成功', center: true })
          }
            this.handleSuccessSave(eit_duty_content)
        },
        //成功回调
        handleSuccessSave(result) {
            if (result.errorCode === '1') {
                this.init()
                this.my_state = '0'
            }
        },
        /**
         * @name 增加职责内容
         */
        handleAddDuty(e) {
            const add_duty_content = syncRequest({
                url: 'userAddDutyContent',
                method: 'POST',
                data: {
                    dutyId: this.dutyId,
                    content: e.item.content
                }
            })
            this.handleSuccessSave(add_duty_content)
        },
        /**
         * @name 删除职责
         */
        handleDeleteDuty(e) {
          const delete_duty_content = syncRequest({
                url: 'userDelDutyContent',
                data: {
                    dutySubId:e.item.dutySubId
                }
            })
            const errorCode = delete_duty_content.errorCode === '1'
            if (errorCode) {
                this.init()
                this.my_state = '0'
            }
            this.$message({
                message: errorCode ? '删除成功' : '删除失败',
                type: errorCode ? 'success' : 'error',
                duration: 2000,
                center: true
            })
        },
        /**
         * @name 审核已提交
         */
        handleDepartment(num) {
            const content =
                num == 0
                    ? this.STATUS[this.my_state] + (this.man_refuse_content ? ': ' + this.man_refuse_content : '')
                    : this.STATUS[this.department_state] + (this.part_refuse_content ? ': ' + this.part_refuse_content : '')
            this.$message({
                message: content,
                type:
                    (num == 0 && this.STATUS[this.my_state] === '已拒绝') || (num != 0 && this.STATUS[this.department_state] === '已拒绝')
                        ? 'error'
                        : 'success',
                duration: 2000,
                center: true
            })
        },
        /**
         * @name 人员职责
         */
        handleManDuty(e) {
          if (e.type === 0) {
            const man_duty = syncRequest({
              url: 'userGet',
              data: {
                userId: e.id,
                year: ''
              }
            })
            const errorCode = man_duty.errorCode === '1'
            if (errorCode) {
              this.personageList = man_duty.data.contentList
              this.personage_name = man_duty.data.userName
              this.centerDialogVisible = true
            } else {
              this.$message({
                message: '当年暂无职责',
                type: 'warning',
                duration: 2000,
                center: true
              })
            }
          } else {
            const department_duty = syncRequest({
              url: 'deptGet',
              data: {
                deptId: e.id,
                year: ''
              }
            })
            const errorCode = department_duty.errorCode === '1'
            if (errorCode) {
              this.personageList = department_duty.data.contentList
              this.personage_name = department_duty.data.deptName
              this.centerDialogVisible = true
            } else {
              this.$message({
                message: '当年暂无职责',
                type: 'warning',
                duration: 2000,
                center: true
              })
            }
          }
        }
    }
}
</script>

<style scoped lang="scss">
.el-aside {
  background-color: #E9EEF3;
  padding:0;
}
.main-box {
  background-color: #E9EEF3;
  user-select: none; padding: 12px;
}

.mail-list {
  width: 100%;
  height: 100%;
}
.my-duty {padding-bottom: 12px; margin-right: 12px; border-radius: 4px;
}

.box-card {
    width: 100%;
    background-color: #ffffff;
    padding: 10px; border-radius: 4px;
}

.card-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
::v-deep .el-scrollbar__wrap {
  height: 100%;
  overflow-x: auto;
}
::v-deep .vxe-modal--header {
  text-align: center;
}
::v-deep .vxe-modal--title {
  font-size: 20px;
}
.personage {
  padding: 0.5rem 1.5rem;
}
.personage_box {
    width: 100%;
    padding: 10px 0;
    display: flex;
    border-bottom: 1px solid #eee;
}

.personage_box:nth-last-child(1) {
    border-bottom: none;
}

.personage_box > p:nth-child(1) {
    width: 17px;
    height: 17px;
    line-height: 17px;
    opacity: 1;
    background: #1966e2;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    font-size: 13px;
    position: relative;
    top: 4px;
}
.personage-text {
  flex: 1;
  font-size: 16px;
}
.flex {
    display: flex;
}
.flex-1 {
    flex: 1;
}
.m-b-14 {
    margin-bottom: 10px;
}
.person_body{ width: 100%; height: 100%;
.my-duty:last-child{ margin-bottom: 0px; padding-bottom: 0px;}
 }
@media (max-width: 1024px) {
  ::v-deep .vxe-modal--title {
    font-size: 18px;
  }
  .personage-text {
    flex: 1;
    font-size: 14px;
  }
  .personage_box > p:nth-child(1) {
    width: 17px;
    height:17px;
    line-height: 17px;
    opacity: 1;
    background: #1966e2;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    font-size: 13px;
    position: relative;
    top: 2px;
  }
}
</style>
